import React from 'react';
import { inject, observer } from 'mobx-react';
import { routerShape } from 'react-router';
import { Condition } from './list/listCondition';
import { WeaErrorPage, WeaTools, WeaTop, WeaSearchGroup, WeaRightMenu, WeaPopoverHrm, WeaSelect } from 'ecCom';
import { Button } from 'antd';
import isEmpty from 'lodash/isEmpty';
import { WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

@inject('contacterQueryStore')
@observer
class ContacterQuery extends React.Component {
    static contextTypes = {
      router: routerShape,
    }
    constructor(props) {
      super(props);
    }
    resetHeight(height) {
      jQuery('.crm-query-condition').height(height - 60);
    }
    componentDidMount() {
      const { contacterQueryStore } = this.props;
      contacterQueryStore.initDatas();
    }
    componentWillReceiveProps(nextProps) {
      const keyOld = this.props.location.key;
      const keyNew = nextProps.location.key;
      if (keyOld !== keyNew) {
        const { contacterQueryStore } = nextProps;
        contacterQueryStore.initDatas();
      }
    }
    shouldComponentUpdate(nextProps, nextState) {
      return true;
    }
    render() {
      const { contacterQueryStore } = this.props;
      let { loading, title, form, verified, hasRight } = contacterQueryStore;
      title = getLabel(32731, '查询联系人');
      if (verified && !hasRight) {
        return (<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@z690wd`} >
          <div style={{ color: '#000' }}>
            {getLabel(2012, '对不起，您暂时没有权限！')}
          </div>
        </WeaAlertPage>
        );
      }
      if (verified && hasRight) {
        return (
          <div className="crm-query">
            <WeaRightMenu
              ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@ro811e`}
              datas={this.getRightMenu()}
              collectParams={{
                favname: title,
                favouritetype: 4,
                importantlevel: 1,
                objid: -1,
              }}
            >
              <WeaTop
                ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@z2akak`}
                title={title}
                loading={loading}
                icon={<i className="icon-coms-crm" />}
                iconBgcolor="#96358a"
                getHeight={this.resetHeight.bind(this)}
                buttons={[]}
                buttonSpace={10}
                showDropIcon
                dropMenuDatas={this.getRightMenu()}
              >
                <div className="crm-query-condition">
                  <Condition ecId={`${this && this.props && this.props.ecId || ''}_Condition@fb80w6`} listStore={contacterQueryStore} form={form} onEnterSearch={this.forwardQueryResult} />
                </div>
                <div className="crm-query-btns">
                  {this.getSearchButtons(this.props.ecId || '')}
                </div>
              </WeaTop>
            </WeaRightMenu>
          </div>
        );
      }
      return <div />;
    }
    getRightMenu() {
    	const btns = [];
    	btns.push({
        key: 'search',
    		icon: <i className="icon-coms-search" />,
        content: getLabel(197, '搜索'),
        onClick: this.forwardQueryResult.bind(this),
    	});
    	return btns;
    }
    getSearchButtons(ecId) {
      const { contacterQueryStore } = this.props;
      const { clearFormFields } = contacterQueryStore;
      const btnStyle = { borderRadius: 3, height: 28, width: 80 };
      return [
        (<Button ecId={`${ecId}_Button@4yzyl2@search`} type="primary" style={btnStyle} onClick={this.forwardQueryResult.bind(this)}>{getLabel(197, '搜索')}</Button>),
        (<span style={{ width: '15px', display: 'inline-block' }} />),
        (<Button ecId={`${ecId}_Button@5wtdl1@reset`} type="ghost" style={btnStyle} onClick={() => { clearFormFields(); }}>{getLabel(2022, '重置')}</Button>),
      ];
    }
    forwardQueryResult=() => {
      const { contacterQueryStore, location } = this.props;
      this.context.router.push({
        pathname: '/main/crm/contacterSearchResult',
      });
    }
}

export default WeaTools.tryCatch(React,
  props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@94hjy5`} msg={props.error ? props.error : getLabel(129417, '服务器运行出错，请联系系统管理员！')} />,
  { error: '' },
)(ContacterQuery);
